<template>
  <breadCrumb ref="breadcrumb" :item="item"></breadCrumb>
  <div class="home-wrapped">
    <!-- 轮播图外壳 -->
    <div class="swiper-wrapped">
      <el-carousel :interval="4000" type="card" height="320px" indicator-position="outside">
        <el-carousel-item v-for="(item, index) in imageUrl" :key="index">
          <img :src="item" class="swiper" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 栅格布局外壳 -->
    <div class="layout-wrapped">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item, index) in companyIntroduce" :key="index + 1"
          @click="openIntroduceDialog(index)">
          <div class=" company-message-area">
            <span>{{ item.set_name }}</span>
            <div class="company-introduce" v-html="item.set_text"></div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 表格外壳 -->
    <div class="two-table-wrapped">
      <!-- 公司公告 -->
      <div class="company-notice">
        <span class="title">公司公告</span>
        <el-table :data="companyData" style="width: 100%" :show-header='false' @row-dblclick="openCompany">
          <el-table-column prop="message_title" label="公告主题">
            <template #default='{ row }'>
              <div class="message_title">{{ row.message_title }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="message_level" label="等级">
            <template #default='{ row }'>
              <el-tag class="mx-1" round v-if="row.message_level == '一般'">{{ row.message_level }}</el-tag>
              <el-tag type="warning" class="mx-1" round v-if="row.message_level == '重要'">{{ row.message_level
                }}</el-tag>
              <el-tag type="danger" class="mx-1" round v-if="row.message_level == '必要'">{{ row.message_level }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="message_publish_department" label="发布部门" />
          <el-table-column prop="message_publish_time" label="发布时间">
            <template #default="{ row }">
              <div>{{ row.message_publish_time?.slice(0, 10) }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 系统消息 -->
      <div class="system-message">
        <span class="title">系统消息</span>
        <el-table :data="systemData" style="width: 100%" :show-header='false' @row-dblclick="openSystem">
          <el-table-column prop="message_title" label="公告主题" />
          <el-table-column prop="message_publish_time" label="发布时间">
            <template #default="{ row }">
              <div>{{ row.message_publish_time?.slice(0, 10) }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
  <introduceDialog ref="introduceDialogRef" :companyIntroduce="companyIntroduce"></introduceDialog>
  <commonMsg ref="commonMsgRef"></commonMsg>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue"
import breadCrumb from "../../components/breadCrumb.vue"
import { getAllSwiperAPI } from '../../api/setting'
import { getCompanyAllInfo } from '../../api/setting'
import introduceDialog from './components/introduceDialog.vue'
import { getCompanyMessageListAPI, getSystemMessageListAPI } from '../../api/message'
import commonMsg from '../../components/commonMsg.vue'

const breadcrumb = ref()
const item = ref({
  first: '首页'
})
const imageUrl = ref([])

// 获取所有轮播图
const getAllSwiper = async () => {
  const res = await getAllSwiperAPI()
  let swiperList = res.data.data

  const swiperUrlList = swiperList.map((item) => {
    return item.set_value
  })
  imageUrl.value = swiperUrlList
}
onMounted(() => {
  getAllSwiper()
})



const companyIntroduce = ref()
// 获取公司信息
const getCompanyIntroduce = async () => {
  const res = await getCompanyAllInfo()
  companyIntroduce.value = res.data.data.slice(1)
}
getCompanyIntroduce()

// 打开公司介绍弹窗
const introduceDialogRef = ref()
const openIntroduceDialog = (index) => {
  introduceDialogRef.value.openDialog(index)
}

const companyData = ref([])
const systemData = ref([])

// 使用 Promise.all() 方法来同时发起两个异步请求
const getAllMessage = async () => {
  try {
    const [res, res2] = await Promise.all([
      getCompanyMessageListAPI(),
      getSystemMessageListAPI()
    ])

    companyData.value = res.data.data
    systemData.value = res2.data.data

  } catch (error) {
    console.error('Error fetching messages:', error)
  }
}
getAllMessage()


const commonMsgRef = ref()
const openCompany = (row) => {
  commonMsgRef.value.open(row)
}
const openSystem = (row) => {
  commonMsgRef.value.open(row)
}
</script>

<style lang="scss" scoped>
@mixin table-class {
  height: 232px;
  width: 48%;
  display: flex;
  flex-direction: column;
}

// 首页外壳
.home-wrapped {
  padding: 8px;
  height: calc(100vh - 101px);
  background: #f5f5f5;
  display: flex;
  flex-direction: column;

  // 轮播图外壳
  .swiper-wrapped {
    padding: 0 20px;
    background: #fff;
    margin-bottom: 8px;

    .swiper {
      width: 100%;
      height: 100%;
    }
  }

  // 栅格布局外壳
  .layout-wrapped {
    padding: 8px;
    margin-bottom: 8px;
    background: #fff;

    // 公司信息区域
    .company-message-area {
      background: #f5f5f5;
      height: 200px;
      padding: 8px;
      cursor: pointer;

      span {
        border-bottom: 1px solid #409eff;
        font-size: 14px;
      }

      .company-introduce {
        text-indent: 24px;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 7;
        display: -webkit-box;
        -webkit-box-orient: vertical;

      }
    }

    .company-message-area:hover {
      cursor: pointer;
      background-color: #eef5ff;
    }
  }

  // 表格外壳
  .two-table-wrapped {
    height: 232px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #fff;

    // 公司公告
    .company-notice {
      @include table-class
    }

    // 系统消息
    .system-message {
      @include table-class
    }

    .title {
      font-size: 14px;
      margin-bottom: 5px;
      border-bottom: 1px solid #ea0709;
    }
  }
}

.message_title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// 轮播图默认样式
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
<style lang="scss">
.company-introduce {
  ul li {
    text-indent: 0;
  }
}

.el-table .el-table__cell {
  padding: 5px 0;
}

.el-tag {
  --el-tag-font-size: 10px;
  --el-tag-border-radius: 4px;
  --el-tag-border-radius-rounded: 9999px;
  align-items: center;
  background-color: var(--el-tag-bg-color);
  border-color: var(--el-tag-border-color);
  border-radius: var(--el-tag-border-radius);
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  color: var(--el-tag-text-color);
  display: inline-flex;
  font-size: var(--el-tag-font-size);
  height: 20px;
  justify-content: center;
  line-height: 1;
  padding: 0 8px;
  vertical-align: middle;
  white-space: nowrap;
  --el-icon-size: 14px;
}

.home-wrapped .two-table-wrapped .title[data-v-5954443c] {
  font-size: 14px;
  padding-bottom: 7px;
  border-bottom: 1px solid #ea0709;
  margin-top: 5px;
}

.home-wrapped .layout-wrapped .company-message-area[data-v-5954443c] {
  background: #f5f5f5;
  height: 182px;
  padding: 8px;
  cursor: pointer;
}
</style>